<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>p4_元素溢出</title>
  <style>
    .box{
      border: 5px solid #f00;
      /* 必须限制所在区域的大小才会出现溢出，否则内容会把高度撑起来 */
      width: 700px;
      height: 1000px;
      /* 溢出可见，默认值 */
      overflow: visible;
      /* 溢出隐藏，超出去的部分直接裁掉 */
      overflow: hidden;
      /* 无论是否溢出，两个方向都显示拖拽条 */
      overflow: scroll;
      /* 溢出的方向才显示拖拽条 */
      overflow: auto;
    }
    img{
      width: 200px;
      /* 基线对齐 默认值 */
      vertical-align: baseline;
      /* 底线对齐 */
      vertical-align: bottom;
      /* 顶线对齐 */
      vertical-align: top;
      /* 中线对齐 */
      vertical-align: middle;
    }
  </style>
</head>
<body>
  abyj<img src="1.png">国圈<img src="1.png">

  <div class="box">
      <img src="1.png" alt="">
      <img src="1.png" alt="">
      <img src="1.png" alt="">
      <img src="1.png" alt="">
      <img src="1.png" alt="">
  </div>

</body>
</html>